<template>
  <div
    v-if="visible"
    class="fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)] bg-opacity-50 z-50"
  >
    <div
      class="w-[800px] max-w-[90%] max-h-[90vh] bg-white rounded-lg shadow-lg flex flex-col overflow-hidden"
    >
      <div
        class="flex justify-between items-center px-6 py-4 border-b border-gray-200"
      >
        <h2 class="text-xl text-gray-800 font-medium">
          贵州地区新能源车企分析
        </h2>
        <button
          class="text-2xl text-gray-400 hover:text-gray-700 cursor-pointer border-none bg-transparent"
          @click="handleClose"
        >
          ×
        </button>
      </div>

      <div class="flex border-b border-gray-200">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="[
            'px-6 py-3 cursor-pointer font-medium transition-all',
            activeTab === index
              ? 'text-blue-500 border-b-2 border-blue-500'
              : 'text-gray-600 hover:text-gray-800',
          ]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>

      <div class="p-5 overflow-y-auto">
        <!-- 企业概览 -->
        <div v-if="activeTab === 0" class="flex flex-col space-y-5">
          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-green-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">📊</div>
              <h3 class="text-base text-gray-800 font-medium m-0">
                数据来源统计
              </h3>
            </div>
            <div class="p-4">
              <div class="flex flex-col space-y-2">
                <div class="flex">
                  <span class="w-30 text-gray-600">内部数据：</span>
                  <span class="font-medium text-gray-800">4家企业</span>
                </div>
                <div class="flex">
                  <span class="w-30 text-gray-600">外部数据：</span>
                  <span class="font-medium text-gray-800">16家企业</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-blue-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">🏢</div>
              <h3 class="text-base text-gray-800 font-medium m-0">
                企业规模分布
              </h3>
            </div>
            <div class="p-4">
              <div class="flex justify-between">
                <div class="text-center px-2.5 py-2.5">
                  <div class="text-gray-600 mb-2">大型企业</div>
                  <div class="text-xl font-semibold text-blue-500">
                    {{ largeCompanies.length }}家
                  </div>
                  <button
                    @click="
                      showSizeDetail =
                        showSizeDetail === 'large' ? null : 'large'
                    "
                    class="mt-2 text-sm px-3 py-1 rounded border border-blue-500 text-blue-500 hover:bg-blue-50 transition-colors"
                  >
                    {{ showSizeDetail === "large" ? "收起" : "查看详情" }}
                  </button>
                </div>
                <div class="text-center px-2.5 py-2.5">
                  <div class="text-gray-600 mb-2">中型企业</div>
                  <div class="text-xl font-semibold text-blue-500">
                    {{ mediumCompanies.length }}家
                  </div>
                  <button
                    @click="
                      showSizeDetail =
                        showSizeDetail === 'medium' ? null : 'medium'
                    "
                    class="mt-2 text-sm px-3 py-1 rounded border border-blue-500 text-blue-500 hover:bg-blue-50 transition-colors"
                  >
                    {{ showSizeDetail === "medium" ? "收起" : "查看详情" }}
                  </button>
                </div>
                <div class="text-center px-2.5 py-2.5">
                  <div class="text-gray-600 mb-2">小型企业</div>
                  <div class="text-xl font-semibold text-blue-500">
                    {{ smallCompanies.length }}家
                  </div>
                  <button
                    @click="
                      showSizeDetail =
                        showSizeDetail === 'small' ? null : 'small'
                    "
                    class="mt-2 text-sm px-3 py-1 rounded border border-blue-500 text-blue-500 hover:bg-blue-50 transition-colors"
                  >
                    {{ showSizeDetail === "small" ? "收起" : "查看详情" }}
                  </button>
                </div>
              </div>

              <!-- 大型企业详情 -->
              <div
                v-if="showSizeDetail === 'large'"
                class="mt-4 border-t border-gray-200 pt-4"
              >
                <h4 class="text-base font-medium text-gray-800 mb-3">
                  大型企业详情
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div
                    v-for="(company, index) in largeCompanies"
                    :key="'large-' + index"
                    class="p-3 border border-gray-200 rounded-md"
                  >
                    <div class="font-medium text-gray-800">
                      {{ company.name }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">
                      注册资本: {{ company.capital }}
                    </div>
                    <div class="flex flex-wrap gap-2 mt-2">
                      <span
                        v-for="(tag, tagIndex) in company.tags"
                        :key="tagIndex"
                        :class="[
                          'text-xs px-2 py-1 rounded',
                          tag.type === 'primary'
                            ? 'bg-blue-50 text-blue-500'
                            : tag.type === 'success'
                            ? 'bg-green-50 text-green-500'
                            : tag.type === 'warning'
                            ? 'bg-yellow-50 text-yellow-600'
                            : tag.type === 'info'
                            ? 'bg-cyan-50 text-cyan-600'
                            : 'bg-purple-50 text-purple-500',
                        ]"
                      >
                        {{ tag.text }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 中型企业详情 -->
              <div
                v-if="showSizeDetail === 'medium'"
                class="mt-4 border-t border-gray-200 pt-4"
              >
                <h4 class="text-base font-medium text-gray-800 mb-3">
                  中型企业详情
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div
                    v-for="(company, index) in mediumCompanies"
                    :key="'medium-' + index"
                    class="p-3 border border-gray-200 rounded-md"
                  >
                    <div class="font-medium text-gray-800">
                      {{ company.name }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">
                      注册资本: {{ company.capital }}
                    </div>
                    <div class="flex flex-wrap gap-2 mt-2">
                      <span
                        v-for="(tag, tagIndex) in company.tags"
                        :key="tagIndex"
                        :class="[
                          'text-xs px-2 py-1 rounded',
                          tag.type === 'primary'
                            ? 'bg-blue-50 text-blue-500'
                            : tag.type === 'success'
                            ? 'bg-green-50 text-green-500'
                            : tag.type === 'warning'
                            ? 'bg-yellow-50 text-yellow-600'
                            : tag.type === 'info'
                            ? 'bg-cyan-50 text-cyan-600'
                            : 'bg-purple-50 text-purple-500',
                        ]"
                      >
                        {{ tag.text }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 小型企业详情 -->
              <div
                v-if="showSizeDetail === 'small'"
                class="mt-4 border-t border-gray-200 pt-4"
              >
                <h4 class="text-base font-medium text-gray-800 mb-3">
                  小型企业详情
                </h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div
                    v-for="(company, index) in smallCompanies"
                    :key="'small-' + index"
                    class="p-3 border border-gray-200 rounded-md"
                  >
                    <div class="font-medium text-gray-800">
                      {{ company.name }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">
                      注册资本: {{ company.capital }}
                    </div>
                    <div class="flex flex-wrap gap-2 mt-2">
                      <span
                        v-for="(tag, tagIndex) in company.tags"
                        :key="tagIndex"
                        :class="[
                          'text-xs px-2 py-1 rounded',
                          tag.type === 'primary'
                            ? 'bg-blue-50 text-blue-500'
                            : tag.type === 'success'
                            ? 'bg-green-50 text-green-500'
                            : tag.type === 'warning'
                            ? 'bg-yellow-50 text-yellow-600'
                            : tag.type === 'info'
                            ? 'bg-cyan-50 text-cyan-600'
                            : 'bg-purple-50 text-purple-500',
                        ]"
                      >
                        {{ tag.text }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-yellow-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">⚠️</div>
              <h3 class="text-base text-gray-800 font-medium m-0">
                产业链薄弱环节
              </h3>
            </div>
            <div class="p-4">
              <div class="flex flex-col space-y-2">
                <div class="bg-yellow-50 px-3 py-2 rounded text-red-600">
                  电池原材料供应不足
                </div>
                <div class="bg-yellow-50 px-3 py-2 rounded text-red-600">
                  高端芯片依赖进口
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 重点企业 -->
        <div v-if="activeTab === 1" class="flex flex-col space-y-4">
          <div
            v-for="(company, index) in topCompanies"
            :key="index"
            class="border border-gray-200 rounded-lg p-4"
          >
            <div class="text-lg font-semibold text-gray-800 mb-3">
              {{ company.name }}
            </div>
            <div class="flex flex-col space-y-2 mb-3">
              <div class="flex">
                <span class="w-24 text-gray-600">主营业务：</span>
                <span class="text-gray-800">{{ company.business }}</span>
              </div>
              <div class="flex">
                <span class="w-24 text-gray-600">注册资本：</span>
                <span class="text-gray-800">{{ company.capital }}</span>
              </div>
              <div class="flex">
                <span class="w-24 text-gray-600">成立时间：</span>
                <span class="text-gray-800">{{ company.foundedAt }}</span>
              </div>
              <div class="flex">
                <span class="w-24 text-gray-600">员工规模：</span>
                <span class="text-gray-800">{{ company.employees }}</span>
              </div>
            </div>
            <div class="flex flex-wrap gap-2 mt-3">
              <span
                v-for="(tag, tagIndex) in company.tags"
                :key="tagIndex"
                :class="[
                  'text-xs px-2 py-1 rounded',
                  tag.type === 'primary'
                    ? 'bg-blue-50 text-blue-500'
                    : tag.type === 'success'
                    ? 'bg-green-50 text-green-500'
                    : tag.type === 'warning'
                    ? 'bg-yellow-50 text-yellow-600'
                    : tag.type === 'info'
                    ? 'bg-cyan-50 text-cyan-600'
                    : 'bg-purple-50 text-purple-500',
                ]"
              >
                {{ tag.text }}
              </span>
            </div>
          </div>
        </div>

        <!-- 产业分析 -->
        <div v-if="activeTab === 2" class="flex flex-col space-y-5">
          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-blue-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">📈</div>
              <h3 class="text-base text-gray-800 font-medium m-0">
                产业集中度
              </h3>
            </div>
            <div class="p-4">
              <div class="flex flex-col space-y-4">
                <div class="flex items-center">
                  <div class="w-24 text-gray-600">整车制造</div>
                  <div
                    class="flex-1 h-2 bg-gray-100 rounded mx-3 overflow-hidden"
                  >
                    <div
                      class="h-full bg-blue-500 rounded"
                      style="width: 75%"
                    ></div>
                  </div>
                  <div class="w-10 text-right text-gray-800 font-medium">
                    75%
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="w-24 text-gray-600">电池制造</div>
                  <div
                    class="flex-1 h-2 bg-gray-100 rounded mx-3 overflow-hidden"
                  >
                    <div
                      class="h-full bg-blue-500 rounded"
                      style="width: 60%"
                    ></div>
                  </div>
                  <div class="w-10 text-right text-gray-800 font-medium">
                    60%
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="w-24 text-gray-600">电机系统</div>
                  <div
                    class="flex-1 h-2 bg-gray-100 rounded mx-3 overflow-hidden"
                  >
                    <div
                      class="h-full bg-blue-500 rounded"
                      style="width: 45%"
                    ></div>
                  </div>
                  <div class="w-10 text-right text-gray-800 font-medium">
                    45%
                  </div>
                </div>
                <div class="flex items-center">
                  <div class="w-24 text-gray-600">电控系统</div>
                  <div
                    class="flex-1 h-2 bg-gray-100 rounded mx-3 overflow-hidden"
                  >
                    <div
                      class="h-full bg-blue-500 rounded"
                      style="width: 30%"
                    ></div>
                  </div>
                  <div class="w-10 text-right text-gray-800 font-medium">
                    30%
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-green-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">💪</div>
              <h3 class="text-base text-gray-800 font-medium m-0">产业优势</h3>
            </div>
            <div class="p-4">
              <div class="flex flex-col space-y-2.5">
                <div class="bg-green-50 text-green-600 px-2.5 py-2.5 rounded">
                  丰富的锂电池资源
                </div>
                <div class="bg-green-50 text-green-600 px-2.5 py-2.5 rounded">
                  较低的生产成本
                </div>
                <div class="bg-green-50 text-green-600 px-2.5 py-2.5 rounded">
                  完整的汽车制造产业基础
                </div>
              </div>
            </div>
          </div>

          <div
            class="rounded-lg overflow-hidden shadow-sm border-l-4 border-l-purple-500"
          >
            <div
              class="flex items-center p-4 bg-gray-50 border-b border-gray-200"
            >
              <div class="mr-3 text-lg">📋</div>
              <h3 class="text-base text-gray-800 font-medium m-0">政策支持</h3>
            </div>
            <div class="p-4">
              <div class="flex flex-col space-y-2.5">
                <div class="bg-purple-50 text-purple-600 px-2.5 py-2.5 rounded">
                  新能源汽车产业发展规划（2021-2035年）
                </div>
                <div class="bg-purple-50 text-purple-600 px-2.5 py-2.5 rounded">
                  贵州省新能源汽车产业集群发展计划
                </div>
                <div class="bg-purple-50 text-purple-600 px-2.5 py-2.5 rounded">
                  电动汽车充电基础设施建设奖励政策
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AgentResultModal",

  data() {
    return {
      visible: true,
      activeTab: 0,
      showSizeDetail: null, // 'large', 'medium', 'small' 或 null
      tabs: ["企业概览", "重点企业", "产业分析"],
      largeCompanies: [
        {
          name: "贵州恒驰新能源汽车有限公司",
          capital: "50亿元",
          tags: [
            { text: "整车制造", type: "primary" },
            { text: "上市企业", type: "success" },
          ],
        },
        {
          name: "贵阳比亚迪汽车有限公司",
          capital: "30亿元",
          tags: [
            { text: "整车制造", type: "primary" },
            { text: "电池制造", type: "info" },
          ],
        },
        {
          name: "贵州航天电器股份有限公司",
          capital: "4.29亿元",
          tags: [
            { text: "电控系统", type: "info" },
            { text: "军工背景", type: "purple" },
          ],
        },
        {
          name: "贵州轮胎股份有限公司",
          capital: "7.8亿元",
          tags: [
            { text: "零部件", type: "warning" },
            { text: "上市企业", type: "success" },
          ],
        },
      ],
      mediumCompanies: [
        {
          name: "贵州长征电气股份有限公司",
          capital: "5亿元",
          tags: [
            { text: "核心零部件", type: "warning" },
            { text: "科创板上市", type: "success" },
          ],
        },
        {
          name: "贵州申特科技有限公司",
          capital: "2.5亿元",
          tags: [{ text: "电池材料", type: "info" }],
        },
        {
          name: "贵州凯力新能源有限公司",
          capital: "1.8亿元",
          tags: [{ text: "电动控制器", type: "primary" }],
        },
        {
          name: "贵州飞田汽车电子有限公司",
          capital: "1.2亿元",
          tags: [{ text: "智能系统", type: "info" }],
        },
        {
          name: "贵州明阳新能源设备有限公司",
          capital: "3.5亿元",
          tags: [
            { text: "充电设施", type: "warning" },
            { text: "国资背景", type: "purple" },
          ],
        },
        {
          name: "贵州瑞宏锂业科技有限公司",
          capital: "2.8亿元",
          tags: [
            { text: "电池原材料", type: "primary" },
            { text: "民营企业", type: "info" },
          ],
        },
      ],
      smallCompanies: [
        {
          name: "贵州智行科技有限公司",
          capital: "5000万元",
          tags: [{ text: "充电设备", type: "warning" }],
        },
        {
          name: "贵州电驱动技术有限公司",
          capital: "3000万元",
          tags: [{ text: "电机系统", type: "primary" }],
        },
        {
          name: "贵州智能网联科技有限公司",
          capital: "4500万元",
          tags: [{ text: "软件开发", type: "info" }],
        },
        {
          name: "贵州新动力科技有限公司",
          capital: "2800万元",
          tags: [{ text: "电池管理", type: "warning" }],
        },
        {
          name: "贵州车联云科技有限公司",
          capital: "3500万元",
          tags: [
            { text: "车联网", type: "info" },
            { text: "数据服务", type: "primary" },
          ],
        },
        {
          name: "贵州绿动科技有限公司",
          capital: "2000万元",
          tags: [{ text: "电控算法", type: "primary" }],
        },
        {
          name: "贵州轻量化材料研究院",
          capital: "4800万元",
          tags: [
            { text: "材料研发", type: "warning" },
            { text: "产学研", type: "info" },
          ],
        },
        {
          name: "贵州未来出行科技有限公司",
          capital: "1500万元",
          tags: [{ text: "共享出行", type: "success" }],
        },
        {
          name: "贵州智驾科技有限公司",
          capital: "2500万元",
          tags: [{ text: "自动驾驶", type: "purple" }],
        },
        {
          name: "贵州能源互联网科技有限公司",
          capital: "3200万元",
          tags: [
            { text: "能源管理", type: "warning" },
            { text: "智能电网", type: "info" },
          ],
        },
      ],
      topCompanies: [
        {
          name: "贵州恒驰新能源汽车有限公司",
          business: "新能源汽车整车制造",
          capital: "50亿元",
          foundedAt: "2019-06-25",
          employees: "2000-5000人",
          tags: [
            { text: "整车制造", type: "primary" },
            { text: "上市企业", type: "success" },
          ],
        },
        {
          name: "贵阳比亚迪汽车有限公司",
          business: "新能源汽车、电池制造",
          capital: "30亿元",
          foundedAt: "2017-03-18",
          employees: "1000-2000人",
          tags: [
            { text: "整车制造", type: "primary" },
            { text: "电池制造", type: "info" },
          ],
        },
        {
          name: "贵州长征电气股份有限公司",
          business: "电控系统研发制造",
          capital: "5亿元",
          foundedAt: "2010-11-08",
          employees: "500-1000人",
          tags: [
            { text: "核心零部件", type: "warning" },
            { text: "科创板上市", type: "success" },
          ],
        },
        {
          name: "贵州航天电器股份有限公司",
          business: "电子连接器、高压电器",
          capital: "4.29亿元",
          foundedAt: "2000-12-26",
          employees: "1000-2000人",
          tags: [
            { text: "电控系统", type: "info" },
            { text: "军工背景", type: "purple" },
          ],
        },
      ],
    };
  },

  methods: {
    handleClose() {
      this.visible = false;
      this.$emit("close");
    },
  },
};
</script>
